<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">健身视频</block>
				<block slot="right"><button class="cu-btn bg-green shadow" @tap="showModal" data-target="DrawerModalL">search</button></block>
					
				
			
			</cu-custom>
			<!-- <view class="cu-tabbar-height"></view> -->
		<view class="nav-list">
			<navigator style="padding: 0.1rem;margin: 0.3rem;margin-top: .4rem; width: 46%;"  :url="'/pages/basics/' + item.name" class="bg-white nav-li carsty" navigateTo 
			 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
				<!-- <view class="nav-title">{{item.title}}</view> -->
				
				<view class="">
					<image style="width: 100%; height: 5rem;" :src="item.image" ></image>
				</view>
				
				
				<view>{{item.title}}</view>
				<view  class='cu-tag radius sm bg-pink'>初级</view>
				<view class='cu-tag radius sm bg-blue'>徒手训练</view>
				<view class='cu-tag radius sm bg-green'>胸部</view>
			</navigator>
		</view>
		
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='DrawerModalL'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<view class="cu-list menu text-left">
					<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
						<view class="content">
							<view>Item {{index +1}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {elements: [{
						title: '四足俯卧撑',
						name: 'listInfo',
						color: 'gray',
						icon: 'newsfill',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160429_7a5105bb4b153caaf030c490ce36d5a1.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '跪姿俯卧撑',
						name: 'background',
						color: 'gray',
						icon: 'colorlens',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160429_e6e368c91424bc1eefbb43ab818cd3a8.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '标准俯卧撑',
						name: 'text',
						color: 'gray',
						icon: 'font',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160510_5065d5776b468e7018a334ad26690642.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '原地爬行 ',
						name: 'icon',
						color: 'gray',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160510_99982d22e0133d978728c502ec92df2b.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '直腿原地爬行',
						name: 'button',
						color: 'gray',
						icon: 'btn',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160429_b1de2de9275e8acd7c935b0313f92223.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '波比',
						name: 'tag',
						color: 'gray',
						icon: 'tagfill',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160429_2c08131dddbbf9880ed5a3a214ca410a.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '胸椎稳定运动 L',
						name: 'avatar',
						color: 'gray',
						icon: 'myfill',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160616_21ecc15574f261be86085cedf9dea2a2.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '俯身转体抬臂 L',
						name: 'progress',
						color: 'gray',
						icon: 'icloading',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160429_930b8525bbe6a3a8b28432ae3f972d08.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '胸椎稳定运动 R',
						name: 'shadow',
						color: 'gray',
						icon: 'copy',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160616_d825194ffee598fb9aaad595a8a3c72a.jpg?imageview/2/0/w/361/blur/1/format/webp'
					},
					{
						title: '俯身转体抬臂 R',
						name: 'loading',
						color: 'gray',
						icon: 'loading2',
						image:'https://w2.dwstatic.com/yy/ojiastoreimage/20160429_0b05a2c517e1e725de1ab571c3afb66e.jpg?imageview/2/0/w/361/blur/1/format/webp'
					}
				],
				iconList: [{
					icon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					icon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '录像'
				}, {
					icon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '图像'
				}, {
					icon: 'noticefill',
					color: 'olive',
					badge: 22,
					name: '通知'
				}, {
					icon: 'upstagefill',
					color: 'cyan',
					badge: 0,
					name: '排行榜'
				}, {
					icon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '皮肤'
				}, {
					icon: 'discoverfill',
					color: 'purple',
					badge: 0,
					name: '发现'
				}, {
					icon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '帮助'
				}, {
					icon: 'commandfill',
					color: 'purple',
					badge: 0,
					name: '问答'
				}, {
					icon: 'brandfill',
					color: 'mauve',
					badge: 0,
					name: '版权'
				}],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},

			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
	.carsty{
		/* border: 1px solid rgba(0,0,0,1); */
	}
</style>
